<template>
	<wd-notify></wd-notify>
	<wd-navbar title="角色管理" placeholder safeAreaInsetTop right-text="添加" left-arrow @click-left="clickHeaderLeft"
		@click-right="clickHeaderRight" :bordered="false"></wd-navbar>
	<wd-tabs v-model="tab">
		<block v-for="item in RoleTabs" :key="item">
			<wd-tab :title="item">
			</wd-tab>
		</block>
	</wd-tabs>
	<view class="real-list">
		<view class="real-li" v-for="(li,index) in data.roleList">
			<view class="role-li-top">
				<text class="role-li-top-name">{{li.name}}</text>
				<text class="role-li-top-date">{{li.create_date}}</text>
			</view>
			<view class="role-li-bottom">
				<text class="role-li-bottom-scope">{{li.scope}}</text>
				<text class="role-li-bottom-state">{{li.state}}</text>
			</view>

			<view class="role-options">
				<view class="options-left">

				</view>
				<view class="options-right">
					<view class="options-right-li">
						<wd-button hairline size="small" @click="clickRole(li)">查看</wd-button>
					</view>
					<view class="options-right-li">
						<wd-button hairline size="small">编辑</wd-button>
					</view>
					<view class="options-right-li">
						<wd-button type="error" hairline size="small" @click="clickRemoveRole(li)">删除</wd-button>
					</view>
				</view>
			</view>

		</view>
	</view>

	<wd-overlay :show="data.addRoleOverlayShow" @click="data.addRoleOverlayShow = false">
		<view class="add-role-wrapper ">
			<view class="add-role-form">
				<view class="add-role-form-title">
				</view>
				<view class="add-role-form-footer">
				</view>
			</view>
		</view>
	</wd-overlay>

</template>

<style>
	.drop-menu {
		display: flex;
		padding: 0rpx 0rpx;
		padding-right: 30rpx;
	}

	.list-where {
		display: flex;
		gap: 18rpx;
	}

	.list-sort {
		flex: 1;
		display: flex;
		justify-content: flex-end;

	}

	.real-list {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		box-sizing: border-box;
		align-items: center;
		padding: 30rpx 4%;
		background-color: #c3c3c344;
		gap: 30rpx;
	}

	.real-li {
		display: flex;
		flex-direction: column;
		gap: 15 rpx;
		width: 100%;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		justify-content: center;
		background: white;
		border-radius: 10rpx;
		font-size: 26rpx;
	}

	.role-li-top,
	.role-li-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.role-options {
		display: flex;
		gap: 18rpx;
	}

	.options-left {
		flex: 1;
		display: flex;
		align-items: center;
		display: flex;
	}

	.options-left-li {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: gray;
	}

	.options-left-li-tips {
		margin-left: 8rpx;
		color: gray;
	}

	.options-right {
		display: flex;
		gap: 18rpx;
	}

	.role-li-top-name {
		font-size: 30rpx;
	}

	.role-li-bottom-scope {
		color: gray;
	}

	.add-role-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.add-role-form {
		width: 80%;
		height: 600rpx;
		background-color: white;
		border-radius: 30rpx;
	}
</style>

<script setup>
	import {
		useNotify
	} from 'wot-design-uni'
	const {
		showNotify,
		closeNotify
	} = useNotify()
	import overallRequest from "@/utool/http/http.js"
	import search from "@/components/search/search.vue"
	import {
		ref,
		reactive
	} from 'vue'

	import {
		onReady
	} from '@dcloudio/uni-app'
	
	const RoleTabs = ref([
		"全部","内置角色","临时角色"
	])
	
	const RoleStatusSelectValue = ref(0)
	const RoleStatusOption = ref([{
			label: '类型',
			value: 0
		},
		{
			label: 'GET',
			value: 1
		},
		{
			label: 'POST',
			value: 2
		},
		{
			label: 'UPDATE',
			value: 3
		},
		{
			label: 'DELETE',
			value: 4
		}
	])

	const listSortSelectValue = ref(0)
	const listSortOption = ref([{
			label: '综合排序',
			value: 0
		},
		{
			label: '最新创建在上',
			value: 1
		},
		{
			label: '最新创建在下',
			value: 2
		}
	])

	// 页面数据
	let data = reactive({
		name: "王嘉豪",
		addRoleOverlayShow: false,
		searchPlaceholder: "",
		searchValue: "",
		roleList: [],
		page: null,
		pages: null,
		limit: null,
		total: null,
		api: "/role/list"
	})

	// 点击角色列表项
	const clickRole = function(role) {
		uni.navigateTo({
			url: "/pages/Mange/Role/info/info"
		})
	}

	// 点击添加
	function clickHeaderRight() {
		uni.navigateTo({
			url: "/pages/Mange/Role/pages/add_role/add_role"
		})
	}
	// 点击返回
	function clickHeaderLeft() {
		uni.navigateBack()
	}
	// 点击删除
	function clickRemoveRole(item) {
		console.log(item);

		let {
			id
		} = item

		console.log({
			id
		});

		let url = "/role/remove"

		overallRequest(url, {
			method: "POST",
			data: {
				id
			}
		}).then(res => {
			let {
				msg
			} = res
			showNotify({
				type: 'success',
				message: msg
			})
			getRoleList()

		}).catch(err => {
			console.log(err);
		})

	}

	// 获取角色数据
	function getRoleList() {
		overallRequest(data.api).then(res => {
			let list = res.data
			data.roleList = list
		}).catch(err => {
			console.log(err);
		})
	}


	onReady(() => {
		getRoleList()
	})
</script>